import { List, Avatar, Spin, Tag } from 'antd';
import { EyeOutlined, UserOutlined } from '@ant-design/icons';
import Text from 'antd/lib/typography/Paragraph';
import moment from 'moment';
import { useEffect, useState } from 'react';
import InfiniteScroll from 'react-infinite-scroller';
import { searchAll } from '../../services/api';
import { IUser } from '../../types';
import { getTagColor } from '../../func';
import { Link } from 'react-router-dom';
interface Item {
    _id: string,
    author: IUser,
    content: string,
    ctime: number,
    subTitle:string,
    preview: number,
    status: number,
    tags: string,
    title: string
}
interface Props {
    keyword: string
}
export default function Article(props: Props) {
    const [data, setData] = useState<Item[]>([])
    const [total, setTotal] = useState(0)
    const [pageIndex, setPageIndex] = useState(1)
    const [sort, setSort] = useState('ctime')
    const [keyword, setKeyword] = useState('')
    const [loading, setLoading] = useState(false)
    const [hasMore, setHasMore] = useState(true)

    useEffect(() => {
        searchAll({
            pageIndex: 1,
            pageSize: 10,
            keyword: props.keyword,
            sort: sort
        }).then((res) => {
            if (res.data) {
                setData(res.data?.items)
                setTotal(res.data?.total)
            }
        })
    }, [props.keyword, sort])

    useEffect(() => {
        setKeyword(props.keyword)
    }, [keyword, props.keyword])

    const handleInfiniteOnLoad = () => {
        setLoading(true)
        if (data.length >= total) {
            setLoading(false);
            setHasMore(false)
            return;
        }
        searchAll({
            pageIndex: pageIndex + 1,
            pageSize: 10,
            keyword: keyword,
            sort: sort
        }).then((res) => {
            if (res.data?.items)
                setData(data.concat(res.data?.items))
            setPageIndex(pageIndex + 1)
            setLoading(false)
        })
    };

    return (
        <div className="demo-infinite-container">
            <InfiniteScroll
                initialLoad={false}
                pageStart={0}
                loadMore={handleInfiniteOnLoad}
                hasMore={!loading && hasMore}
                useWindow={false}
            >
                <List
                    header={<div>排序： <a onClick={() => setSort('ctime')} className={sort === 'ctime' ? '' : 'black'}>时间 </a>
                        <a onClick={() => setSort('preview')} className={sort === 'preview' ? '' : 'black'}>浏览量</a>
                    </div>}
                    rowKey='_id'
                    dataSource={data}
                    renderItem={item => (
                        <List.Item key={item._id}>
                            <List.Item.Meta
                                avatar={
                                    <>
                                        <Avatar src={item.author.avatar} icon={<UserOutlined />} size={40}/>
                                        <Text style={{ width: 40 }} ellipsis={true}>{item.author.nickname ? item.author.nickname :'用户'+item.author.account}</Text>
                                    </>
                                }
                                title={<><Link to={`/View/${item._id}`}><b>{item.title}</b> </Link><span style={{color:'#bbb',paddingLeft:10}}>{item.subTitle?'——'+item.subTitle:''}</span></>}
                                description={<><Text style={{ width: '90%' }} ellipsis={true}>{item.content}</Text><div>{moment(item.ctime).format("YYYY-MM-DD HH:mm:ss")}</div></>}
                            />
                            <div>
                                {item.tags.split(',').map((tag) => {
                                    return (<Tag color={getTagColor(tag)} key={tag}>{tag}</Tag>)
                                })}
                            </div>
                            <div>
                                <EyeOutlined style={{ marginRight: 5 }} />
                                <span>{item.preview}</span>
                            </div>
                        </List.Item>
                    )}
                >
                    {loading && hasMore && (
                        <div className="demo-loading-container">
                            <Spin />
                        </div>
                    )}
                </List>
            </InfiniteScroll>
        </div>
    );
}